<script setup lang="ts">
import logo from "../assets/logo.jpg"
import {Document} from '@element-plus/icons-vue'
import {reactive, ref, watch, watchEffect} from "vue";
import router from "@/router";


const editableTabs = reactive([])

function handleIsClose(item) {
  return item.index !== "home";
}

// const asideMenu = reactive([{"title": "你好", "index": "home", "subs": [{"title": "我也好", "index": "hhhh"}]}])
const asideMenu = reactive([{"title": "你好", "index": "hello"}])
const activeTabName = ref("HomeView")

function handleMenuItem(obj) {
  activeTabName.value = obj.index;
  let result = editableTabs.findIndex((item) => {
    return item.index === obj.index;
  });
  if (result !== -1) {
    return;
  }
  editableTabs.push(obj);
}

function handleRemove(tabPaneName) {
  let tempArr = editableTabs;
  let eleIndex = editableTabs.findIndex((item) => {
    return item.index === tabPaneName;
  });
  let routeIndex;
  for (let p in tempArr) {
    if (tempArr[p].index === tabPaneName) {
      routeIndex = tempArr[p - 1].index;
    }
  }
  activeTabName.value = routeIndex;
  editableTabs.splice(eleIndex, 1);
}

function handleSwitchRoute(tabsPaneContext) {
  let tabPaneName = tabsPaneContext.paneName;
  if (tabPaneName === 0) {
    tabPaneName = "";
  }
  console.log("hellll")
  router.push("/" + tabPaneName);
}

watch(activeTabName, (oldValue, newValue) => {
})


</script>
<template>
  <div class="container">
    <el-container>
      <el-aside style="align-items:center;text-align: center">
        <div style="position: relative;margin-top: 4%">
          <div style="display: flex;align-items: center;justify-content: center;">
            <el-link>
              <el-image :src="logo" style="width: 2em;height: 2em"></el-image>
              <label style="color:white;font-size: 20px">商城系统</label>
            </el-link>
          </div>
        </div>
        <div>
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              :router="true"
          >
            <template v-for="item in asideMenu">
              <!-- 两级菜单 -->
              <template v-if="item.subs">
                <div style="text-align: center;display: flex;align-items: center;justify-content: center;">
                  <el-sub-menu :index="item.title" :key="item.title">
                    <!-- 一级菜单标题 -->
                    <template #title>
                      <el-icon>
                        <document/>
                      </el-icon>
                      <span>{{ item.title }}</span>
                    </template>
                    <!-- 二级菜单标题 -->
                    <template v-for="subItem in item.subs" :key="subItem.index">
                      <el-menu-item
                          :index="subItem.index"
                          @click="() => handleMenuItem(subItem)"
                      >{{ subItem.title }}
                      </el-menu-item
                      >
                    </template>
                  </el-sub-menu>
                </div>
              </template>
              <!-- 一级菜单 -->
              <template v-else>
                <el-menu-item
                    :index="item.index"
                    :key="item.title"
                    @click="() => handleMenuItem(item)"
                >
                  <el-icon>
                    <document/>
                  </el-icon>
                  <span>{{ item.title }}</span>
                </el-menu-item>
              </template>
            </template>
          </el-menu>
        </div>
      </el-aside>
      <el-main>
        <el-header class="el-head">head</el-header>
        <el-tabs
            type="border-card"
            v-model="activeTabName"
            class="demo-tabs"
            @tab-remove="handleRemove"
            @tab-click="handleSwitchRoute"
        >
          <el-tab-pane
              v-for="item in editableTabs"
              :key="item.index"
              :label="item.title"
              :name="item.index"
              :closable="handleIsClose(item)"
          >
            <router-view class="router-view-fullscreen"/>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>
<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
}

.el-aside {
  width: 10%;
  height: 100vh;
  background: #282C34;
}

.el-head {
  background-color: honeydew;
}

.router-view-fullscreen {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
</style>